import * as rrweb from 'rrweb'

let dispose = null
let rrwebEvents = []

// 接口上传文件
function uploadFile() {
    console.log('上传文件 ========>>>>>>>>>>>>>>', '\n', rrwebEvents);
    fetch('http://localhost:8076/upload', {
        method: 'POST',
        headers: {
            'Content-type': 'application/json'
        },
        body: JSON.stringify({
            rrwebEvents
        })
    })
    .then(response => {
        console.log('response', response)
    })
    .catch(error => {
        console.log('error', error)
    })
}

// 清除文件
function clearFile() {
    fetch('http://localhost:8076/clearFile', {
        method: 'POST'
    })
    .then(response => {
        console.log('response', response)
    })
    .catch(error => {
        console.log('error', error)
    })
}

decrease.onclick = function () {
    showText.innerText = showText.innerText - 1
}
add.onclick = function () {
    showText.innerText = showText.innerText / 1 + 1
}
payStart.onclick = function () {
    rrweb.addCustomEvent('pay', {
        text: '正在支付中...',
        status: 'start'
    })
}
payEnd.onclick = function () {
    rrweb.addCustomEvent('pay', {
        status: 'end'
    })
}
record.onclick = function () {
    console.log('开始录制 ========>>>>>>>>>>>>>>')
    clearFile(); // 录制之前清楚本地缓存json文件
    dispose = rrweb.record({
        emit(event) {
            rrwebEvents.push(event);
            // 以 rrwebEvents 的长度作为分片持续上传：
            if(rrwebEvents.length >= 50) {
                uploadFile();
                // 分片之后清空队列：    
                rrwebEvents = [];
            }
        }
    })
}
upload.onclick = function () {
    console.log('结束录制 ========>>>>>>>>>>>>>>')
    if (dispose) {
        // 实际场景需要分片传输的话，就不需要这个关闭，当真正业务不需要录制的时候再调用
        // 分片逻辑是，序列化的rrwebEvents.length的累加大于某个值  --- 分片逻辑看业务需求吧
        // 我们这里上传的时候是 gzip 后的文件上传，不是用的json方式，也需要后端解gzip，这里只负责演示前端，所以压缩逻辑就没写上
        // 压缩逻辑是 引入pako, 然后调用，就不体现了哈
        dispose()
    }
    if (rrwebEvents.length === 0) return
    uploadFile();
    rrwebEvents = []
}